<template>
	<view>
		<view class="warp" v-if="modaishow">
			<view class="warp-view">
				<view class="warp-text">请登陆后再操作</view>
				<view class="warp-flex">
					<button @click="messcancel()" plain="true">取消</button>
					<button plain="true" open-type="getUserInfo" @getuserinfo="getUserInfo">登录</button>
				</view>
			</view>
		</view>
		<!-- 提示组件 -->
		<!-- <HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages> -->
	</view>
</template>

<script>
	// 拿到地址
	import {loginurl} from "../api/request.js"
	// 拿到POST方法
	import {publicing} from "../api/api.js"
	export default{
		data() {
			return {
				modaishow: false
			}
		},
		// props:{
		// 	empty:String
		// },
		methods:{
			// 显示
			init(){
				this.modaishow=true
			},
			// 取消
			messcancel(){
				this.modaishow=false
			},
			// 登录
			// 弹出授权框，获取头像和昵称
			getUserInfo(e){
				console.log(e)
				if(e.detail.userInfo){
					let avatarUrl=e.detail.userInfo.avatarUrl
					let nickName=e.detail.userInfo.nickName
					this.getcode(avatarUrl,nickName)
				}
			},
			// 获取code
			getcode(avatarUrl,nickName){
				uni.login({
					success: (res)=>{
					    console.log(res);
						let code=res.code
						this.getlogin(avatarUrl,nickName,code)
					  },
					fail: (err)=>{
						console.log(err)
					}
				})
			},
			// 登录，获取openid
			getlogin(avatarUrl,nickName,code){
				let data={
					avatarUrl,
					nickName,
					code,
					appid:"wxe390de17ed120ed4",
					secret:"c7a13b25635f52db384c98bb98f4f206"
				}
				publicing(loginurl,data)
				.then(res=>{
					console.log(res)
					// 将得到的openid存到本地，方便以后使用
					if(res.data.msg=="success"){
						// 存入本地
						uni.setStorageSync("username",res.data.datas)
						this.modaishow=false
						uni.showToast({
						    title: '登录成功',
						    duration: 2000
						});
					}
				})
				.catch(err=>{
					console.log(err)
					uni.showToast({
					    title: '登录失败',
					    duration: 2000
					});
				})
			}
		},
		// watch:{
		// 	empty(){
		// 		this.modaishow=true
		// 	}
		// }
	}
</script>

<style scoped>
/* 模态弹窗布局 */
.warp {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
}
.warp-view {
	width: 500upx;
	height: 200upx;
	background: #ffffff;
	margin: auto;
	position: absolute;
	-webkit-position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 8upx;
	overflow: hidden;
}
.warp-text {
	text-align: center;
	margin-top: 30upx;
	font-size: 34upx;
	color: #666666;
}
.warp-flex {
	display: flex;
	justify-content: space-around;
	border-top: 1upx solid #eeeeee;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80upx;
	line-height: 80upx;
}
.warp-flex button {
	border: none;
	font-size: 30upx;
}
</style>
